<template>
	<view>
		<!-- 模糊背景 -->
		<view class="topic-bg">
			<image class="topic-bg-img" :src="item.titlepic" mode="aspectFill" lazy-load></image>
		</view>
		<!-- 话题信息 -->
		<view class="topic-info">
			<view class="topic-info-t m-f-ac">
				<image class="t-img" :src="item.titlepic" mode="widthFix" lazy-load></image>
				<view class="t-title">
					#{{item.title}}#
				</view>
			</view>
			<view class="topic-info-c m-f-ac">
				<view class="c-dongtai">动态 {{item.totlenum}}</view>
				<view class="c-today">今日 {{item.todaynum}}</view>
			</view>
			<view class="topic-info-b">{{item.desc}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object
			}
		}
	}
</script>


<style lang="scss" scoped>
.topic-bg {
	width: 100%;
	height: 300rpx;
	position: relative;
	overflow: hidden;
	.topic-bg-img {
		width: 100%;
		position: absolute;
		filter: blur(10px);
	}
}
.topic-info {
	padding: 0 25rpx;
	.topic-info-t {
		position: relative;
		.t-img {
			width: 150rpx;
			height: 150rpx;
			border-radius: 20rpx;
			position: absolute;
			top: -75rpx
		}
		.t-title {
			font-size: 35rpx;
			margin-left: 170rpx;
			flex: 1;
		}
	}
	.topic-info-c {
		padding: 30rpx 0 15rpx 0;
		.c-dongtai, .c-today {
			color: #CDCDCD;
		}
	}
	.topic-info-b {
		color: #A3A3A3;
		font-size: 32rpx;
		margin-bottom: 10rpx;
	}
}
</style>

